<template>
  <div>
    <a-spin tip="Loading..." :spinning="spinnings">
      <h3 style="margin-top: 30px; margin-left: 60px; font-size: 19px; font-weight: 800"
        >数据资产表目录<span @click="showaddmodelandfuc('输入一级目录', '输入一级目录名', 1, 0)">&nbsp;&nbsp;<plus-circle-filled /></span
      ></h3>
      <a-input v-model:value="searchdata" placeholder="请输入目录名查询" style="margin-left: 5px" :allow-clear="true" @pressEnter="serach" @change="resitecatalogue"></a-input>

      <a-tree
        v-model:selectedKeys="selectedKeys"
        :block-node="true"
        style="margin-top: 10px"
        :tree-data="treeData"
        default-expand-all
        :field-names="{ children: 'children', title: 'directoryName', key: 'directoryId' }"
        :show-icon="true"
        @select="loadDatasourse"
      >
        <!-- <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template> -->
        <template #title="{ dataRef }">
          <!-- <div><span>{{dataRef.directoryName}}</span>&nbsp;&nbsp;&nbsp;<span @click.stop="test"> <edit-filled /></span>&nbsp;&nbsp;<span><plus-circle-filled /></span>&nbsp;&nbsp;<span><minus-circle-filled /></span></div> -->
          <div class="nodecss"
            ><span>{{ dataRef.directoryName }}</span>
            <a-popover placement="bottom" :overlay-style="{ width: '100px' }">
              <template #content>
                <a-button @click="showaddmodelandfuc('输入增加节点', '输入节点名字', 1, dataRef.directoryId)">增加</a-button><br />
                <a-button @click="showaddmodelandfuc('输入删除节点', '输入删除节点名字', 2, dataRef.directoryId)">删除</a-button><br />
                <a-button @click="showaddmodelandfuc('输入编辑后节点名字', '输入节点名字', 3, dataRef.directoryId)">修改</a-button>
              </template>
              <template #title>
                <span style="width: 20px">选择操作</span>
              </template>
              <span style="font-size: smaller"><more-outlined /></span>
            </a-popover>
          </div>
        </template>
      </a-tree>

      <a-modal v-model:visible="visible" :title="title" :destroy-on-close="true" @ok="addcatalogue()">
        <span v-if="state == 2">请确认是否删除</span>
        <a-input v-else v-model:value="modetabledata" :placeholder="placeholder" :destroy-on-close="true"></a-input>

        <div v-show="checkmessage" style="margin-top: 8px; font-size: smaller; color: red">字段只能包含中文和字母</div>
      </a-modal>
    </a-spin>
  </div>
</template>
<script lang="ts">
  import { PlusCircleFilled, SmileOutlined, FrownOutlined, FrownFilled, UnorderedListOutlined, EditFilled, MinusCircleFilled, MoreOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref } from 'vue';
  import { TreeProps, message } from 'ant-design-vue';
  import { AddAsset, AccoundIdCatalogueDataApi, getCatalogueDataApi, addCatalogueDataApi, deleteCatalogueDataApi, searchCatalogueDataApi, UpdateCatalogueName } from '../../api/test/asset';
  import { mit } from '../../utils/assetMittConfig';
  import { useStore } from '@/store';
  import { validateinputcontentcatalogue } from './check';
  export default defineComponent({
    components: {
      PlusCircleFilled,
      MoreOutlined,
    },
    setup() {
      let checkmessage = ref(false);
      let state = ref(0); //状态表示增删改 1新增 2删除 3修改
      let directoryId: number; //id值
      const spinnings = ref(false);
      const store = useStore();
      const selectedKeys = ref([]);
      const placeholder = ref('');
      const title = ref('asdsadas');
      const modetabledata = ref('');
      const visible = ref(false);
      const treeData: any = ref([]);
      const searchdata = ref('');
      //请求区域
      //获取所有目录
      const getCatalogue = async () => {
        spinnings.value = true;
        let a = await getCatalogueDataApi();
        treeData.value = a.data;
        console.log(a.data);
        store.$patch({ test: a.data });
        spinnings.value = false;
      };
      getCatalogue();
      //增删改目录
      const addcatalogue = async () => {
        let a: any;
        if (state.value == 1) {
          if (validateinputcontentcatalogue(modetabledata.value)) {
            a = await addCatalogueDataApi({ directoryName: modetabledata.value, directoryParent: directoryId });
          } else {
            message.info('新增失败，请检查数据格式');
            checkmessage.value = true;
            return;
          }
        } else if (state.value == 2) {
          a = await deleteCatalogueDataApi(directoryId);
          if (a.code == 100401) {
            message.info('删除失败，存在资产表');
            return;
          }
        } else if (state.value == 3) {
          if (validateinputcontentcatalogue(modetabledata.value)) {
            console.log({ directoryName: modetabledata.value, directoryId: directoryId });
            a = await UpdateCatalogueName({ directoryName: modetabledata.value, directoryId: directoryId });
          } else {
            message.info('修改，请检查数据格式');
            checkmessage.value = true;
            return;
          }
        }
        console.log('目录操作返回值', a);
        getCatalogue();
        visible.value = false;
      };
      //监听模态框关闭显示做数据清空
      watch(
        visible,
        (n, o) => {
          if (!n) {
            modetabledata.value = '';
            directoryId = 0;
            checkmessage.value = false;
          }
        },
        { deep: true, immediate: true },
      );
      //选择目录显示对应目录下的资产表
      const loadDatasourse = async (data: any, data2: any) => {
        if (data2.node.children[0] == null) {
          console.log('jinlaile');
          if (selectedKeys.value[0] == undefined) {
            mit.emit('reset');
            return;
          }
          mit.emit('loadtrue');
          console.log('需要数据', selectedKeys.value[0]);

          let a = await AccoundIdCatalogueDataApi({ directoryId: selectedKeys.value[0] });
          console.log('目录返回数据', a);
          mit.emit('accoundCatalogueFlash', a.data.list);
          mit.emit('loadtrue');
        }
      };
      //点击显示模态框
      const showaddmodelandfuc = (pal: any, tit: any, state1: any, id: any) => {
        placeholder.value = pal;
        title.value = tit;
        visible.value = !visible.value;
        state.value = state1;
        directoryId = id;
      };
      //按目录或者资产表查询
      const serach = async () => {
        spinnings.value = true;
        treeData.value = [];
        let a: any = await searchCatalogueDataApi({ directoryName: searchdata.value });
        if (a.code == 100401) {
          message.info('搜索失败');
          spinnings.value = false;
          return;
        }
        // a.data.forEach((li: any) => {
        //   if(li.length==1){
        //     treeData.value.push(li[0]);
        //   }
        // });
        treeData.value.push(a.data[0][0]);
        console.log(treeData.value);
        console.log('查询后数据', a.data);
        spinnings.value = false;
      };
      //字符串为空时自动调用获得数据
      const resitecatalogue = () => {
        if (searchdata.value == '') {
          treeData.value = [];
          getCatalogue();
        }
      };

      //测试区域
      const test = () => {
        console.log(treeData.value);
      };
      return {
        spinnings,
        selectedKeys,
        treeData,
        visible,
        modetabledata,
        title,
        placeholder,
        test,
        loadDatasourse,
        addcatalogue,
        showaddmodelandfuc,
        state,
        serach,
        searchdata,
        resitecatalogue,
        checkmessage,
      };
    },
  });
</script>
<style>
  .nodecss {
    display: flex;
    justify-content: space-between;
  }
</style>
